<template>
  <el-container style="height: 100%">
    <el-header height="350px">
      <el-table :data="tableData" stripe @current-change="loadDetails" height="100%">
        <el-table-column
          v-for="column in tableColumns"
          :key="column.code"
          :prop="column.code"
          :label="column.name"
          :width="column.width ? column.width : 100"
          :formatter="
            (row, column, cellValue, index) => {
              return cell_formatter(column, cellValue, tableColumns)
            }
          "
        />
      </el-table>
    </el-header>
    <el-main>
      <el-table :data="current_bill?.details" stripe height="100%">
        <el-table-column
          v-for="column in coils_cut_order_detail_define"
          :key="column.code"
          :prop="column.code"
          :label="column.name"
          :width="column.width ? column.width : 100"
          :formatter="
            (row, column, cellValue, index) => {
              return cell_formatter(column, cellValue, coils_cut_order_detail_define)
            }
          "
        />
      </el-table>
    </el-main>
  </el-container>
</template>

<script lang="ts" setup>
import { coils_cut_order_define, coils_cut_order_detail_define } from '@/meta/index'
import { useDbStore } from '@/stores/modules/database'
import type { coils_cut_order } from '@/types/billdata'
import { fill_ref_info, cell_formatter } from '@/utils/common'
import { onMounted, ref } from 'vue'
const tableColumns = coils_cut_order_define
const tableData = ref<coils_cut_order[]>()
const current_bill = ref<coils_cut_order>()
onMounted(() => {
  const coils_cut_order: coils_cut_order[] = useDbStore().coils_cut_order
  fill_ref_info(coils_cut_order, coils_cut_order_define)
  tableData.value = coils_cut_order
  if (coils_cut_order.length > 0) current_bill.value = coils_cut_order[0]
})
const loadDetails = (current: coils_cut_order) => {
  current_bill.value = current
}
</script>
